<template>
	<view class="content ">
		<top-bar>
			<template #left>
				<view class="">
				</view>
			</template>
			<template #center>
				<text></text>
			</template>
			<template #right>
				<text style="font-size: 32rpx;padding: 0 6rpx;" @tap="register">注册</text>
			</template>
		</top-bar>
		<view class="main">
			<view class="logo">
				<image src="../../static/images/index/logo.png"></image>
			</view>
			<view class="title">
				<view class="text">登入</view>
				<view class="hello">成见是一座大山！</view>
			</view>
			<view class="login_ipt">
				<view class="email">
					<input type="text" class="email_ipt" placeholder="邮箱账号" @input="checkEmail" @blur="checkEmail"
						maxlength="256" v-model="Email" placeholder-style="color:#aaa">
					<view class="name_img" v-show="Email">
						<image src="../../static/images/login/email_E.png" v-if="!isEmail" mode=""></image>
						<image src="../../static/images/login/email_R.png" v-if="isEmail" mode=""></image>
					</view>
				</view>
				<view class="password"><input type="password" maxlength="18" placeholder="密码" v-model="pwd"
						placeholder-style="color:#aaa"></view>

				<view class="forget" @tap="forgetPassword">
					忘记密码~
				</view>
			</view>
			<view class="login_btn" :class="{register_all:isEmail&&pwd.length>0}" @tap="login()">登录</view>
		</view>
	</view>
</template>

<script>
	import util from '../../commons/js/util.js'
	import tokenMatchApi from "../../api/tokenMatch.js"
	import TopBar from "../../components/top-bar/top-bar.vue"

	export default {
		data() {
			return {
				// title: 'Hello',
				Email: '',
				pwd: '',
				// Email:'xiaoming@163.co',
				// pwd:'xiaoming',
				isEmail: false,
				isCorrect: false,
				testTk: ''
			}
		},
		components: {
			TopBar
		},
		onLoad(option) {
			// console.log(option.email);
			if (option.email) {
				this.Email = option.email
			}
		},
		watch: {
			Email() {
				this.checkEmail()
			}
		},
		methods: {
			testLogin() {
				// console.log(this.userForm);

			},
			forgetPassword() {
				uni.navigateTo({
					url: "/pages/retrievePassword/retrievePassword"
				})
			},
			register() {
				// 有历史记录的跳转
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			login() {
				if (this.isEmail && this.pwd.length > 0) {
					//用户点击登入，向后端发送请求。如果后端存在这个用户的信息，进入主页面。如果没有显示用户名或密码错误
					util.request({
							url: '/signin/match',
							method: 'post',
							data: {
								data: this.Email,
								pwd: this.pwd
							}
						})
						.then(res => {
							//登入成功
							if (res.data.status == 200) {
								// console.log(res.data.back.token);
								// localStorage.setItem('token',res.data.back.token)
								// localStorage.setItem('userid',res.data.back.id)
								//setStorageSync浏览器中存储在localStorage中
								uni.setStorageSync('token', res.data.back.token)
								uni.setStorageSync('userid', res.data.back.id)
								// console.log(uni.getStorageSync('userid'));
								//将用户数据存储到Localstorage中，显示数据使用Localstorage中的数据，数据变更后同步变更本地数据 


								uni.redirectTo({
									url: `/pages/index/index?id=${res.data.back.id}`,
								})
							} else {
								uni.showToast({
									title: '邮箱或密码错误',
									icon: "none",
									duration: 1500
								});
							}
						}).catch(err => {
							console.log(err);
						})
				}
			},
			checkEmail() {
				// if(!this.uesrFrom.Email.length)
				// console.log(this.isEmail);
				util.checkEmailFormat(this.Email) ? this.isEmail = true : this.isEmail = false
			}
		}
	}
</script>

<style lang='scss' scoped>
	/* 顶栏部分 */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}



	.main {
		width: 70%;
		height: 750rpx;
		min-width: 400rpx;
		margin-top: 88rpx;

		/* border: 1px solid red; */
		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 240rpx;

			image {
				width: 192rpx;
				height: 90rpx;
			}
		}

		.title {
			margin: 0 30rpx 0 30rpx;

			/* border: 1px solid red; */
			.text {
				/* width: 56px; */
				height: 40px;
				font-family: PingFangSC-Medium;
				font-size: 28px;
				color: #272832;
				letter-spacing: 0;
				font-weight: 500;
			}

			.hello {
				/* width: 204px; */
				height: 28px;
				font-size: 20px;
				color: rgba(39, 40, 50, 0.50);
				letter-spacing: 0;
			}
		}

		.login_ipt {
			margin: 0 30rpx 0 30rpx;
			font-size: 18px;

			.email {
				border-bottom: 1px solid #d9dae5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $uni-font-size-base;
				padding: 20rpx 0 20rpx 0;
				margin: 20rpx 0 20rpx 0;
				width: 100%;

				.email_ipt {
					width: 100%;
				}

				.name_img {
					text-align: center;
					/* border: 1px solid red; */
					height: 40rpx;
					width: 60rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.password {
				width: 100%;
				padding: 20rpx 0 20rpx 0;
				border-bottom: 1px solid #d9dae5;

			}

			.alter {
				height: 20px;
				font-size: 14px;
				color: #FF5D5B;
			}

			.forget {
				/* border: 1px solid; */
				width: 150rpx;
				text-align: left;
				height: 44rpx;
				text-decoration: underline;
				line-height: 44rpx;
				margin: 6rpx;
				padding: 20rpx 0 0 0;
				font-size: 28rpx;
				color: #2993ab;
			}
		}

		.login_btn {
			transition: all 0.3s;
			margin: 400rpx auto 0 auto;
			min-width: 100rpx;
			max-width: 550rpx;
			height: 96rpx;
			background-color: $uni-bg-color-grey;
			border-radius: 10rpx;
			color: gray;
			font-size: 32rpx;
			text-align: center;
			line-height: 96rpx;
			white-space: 1px;
		}
	}

	/* 好友展示部分 */
	.register_all {
		//开启鼠标点击
		pointer-events: all;
		color: white !important;
		background: #4768f3 !important;
	}
</style>